<template>
	<view class="changePass">
		<view class="contant_box my-pdlr-15">
			<view class="contant_box_li">
				<text>账号：</text>
				<text>{{phone}}</text>
			</view>
			<view class="inp_box_li">
				<view class="inp_box_li_txt">旧密码:</view>
				<input type="text" class="inp" v-model="oldpassword" placeholder-class="inp-pla" placeholder="请输入旧密码" />
			</view>
			<view class="inp_box_li">
				<view class="inp_box_li_txt">新密码:</view>
				<input type="password" class="inp" v-model="newpassword" placeholder-class="inp-pla" placeholder="请输入新密码" />
			</view>
			<view class="inp_box_li">
				<view class="inp_box_li_txt">确认密码:</view>
				<input type="password" class="inp" v-model="confirmpassword" placeholder-class="inp-pla" placeholder="请再次输入新密码" />
			</view>
			<view class="tishi_txt my-mgt-15">
				<view class="txt_v my-mgb-10">密码为6~18位数字和字母的组合，不支持特殊符号</view>
				<view class="forgot" @click="forgot">忘记密码?</view>
			</view>
			<view class="complete">
				<button class="btn" @click="updatapass">完成</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {updatepasswordApi} from "@/api/myinter.js"
	export default {
		data() {
			return {
				phone:null,
				oldpassword:null,
				newpassword:null,
				confirmpassword:null,
			};
		},
		onLoad(options) {
			this.phone = options.phone
		},
		methods:{
			async updatapass(){
				try{
					let params = {
						newPassword:this.newpassword,
						oldPassword:this.oldpassword,
						confirmPassword:this.confirmpassword
					}
					uni.showLoading({
						title:"正在加载中...."
					})
					const res = await updatepasswordApi(params)
					if(res.statusCode ===200){
						uni.hideLoading()
						uni.showToast({
							title:"修改成功",
							icon:"success",
							duration:5000,
							success() {
								uni.navigateTo({
									url:"/pages/my/personalData"
								})
							}
						})
					}
				}catch(e){
					this.newpassword =null
					this.oldpassword =null
					this.confirmpassword =null
				}
			},
			forgot(){
				uni.navigateTo({
					url:"/pages/register/slipPass"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.changePass{
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
		.contant_box{
			width: 100%;
			height: 1165rpx;
			.contant_box_li{
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx solid #F5F5F5;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}
			.inp_box_li{
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx solid #F5F5F5;
				display: flex;
				align-items: center;
				.inp_box_li_txt{
					width: 23%;
					line-height: 100rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}
				.inp{
					width: 77%;
					line-height: 100rpx;
				}
				.inp_pla{
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
				}
			}
			.tishi_txt{
				width: 100%;
				height: 120rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.txt_v{
					font-size: 22rpx;
					font-weight: 400;
					color: #CCCCCC;
				}
				.forgot{
					font-size: 22rpx;
					font-weight: 400;
					color: #F05329;
				}
			}
			.complete{
				width: 100%;
				height: 200rpx;
				display: flex;
				align-items: flex-end;
				.btn{
					width: 690rpx;
					line-height: 88rpx;
					margin: 0 auto;
					background: #F05329;
					border-radius: 10rpx;
					font-size: 38rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
